<!doctype html>
<html>
<!-- template for 多协议数据采集配置界面 保持风格和主要元素统一 
	包括 head 导航栏、页脚、content下移60px InfluxBD配置  框架模板，应用还不够彻底 比如表格框架-->

<head>
	{% block head %}
	<link href="/static/favicon.ico" rel="SHORTCUT ICON" />
	<link rel="apple-touch-icon" href="static/ico.jpg">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- chrome 窗口化 地址栏颜色 -->
	<meta name="msapplication-TileColor" content="#1b3075">
	<!-- 苹果是否启用全屏模式 -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<!-- 安卓 主屏幕应用全屏 -->
	<meta name="mobile-web-app-capable" content="yes">　　
	<!-- 全屏时状态 颜色设置 -->
	<meta name="apple-mobile-web-status-bar-style" content="black">

	<title>数据采集系统-{% block title %}{% endblock %}</title>
	{% endblock %}

	<meta name="description" content="Flask Based SCADA">
	<meta name="Su600" content="Su600">

	<link href="/static/css/bootstrap.min.css" rel="stylesheet">
	<link href="/static/css/style.css" rel="stylesheet">

</head>

<body>
	<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top " id="导航栏">
		<a class="navbar-brand" href="#">
			<img src="/static/avic.png" width="35px">
		</a>
		<a class="navbar-brand" href="/#">Home</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="collapsibleNavbar">
			<nav class="nav justify-content-center">
				{% block navlist %} {% endblock navlist %}
				<a class="btn btn-dark" href="/logout">Logout</a>
		</div>
	</nav>

	<div id="content" style="padding-top: 60px; margin: 10px;">
		{% block content %}{% endblock %}
	</div>

	<div class="container-fluid " style="color: white;" id="influxdbsetting">
		<div class="container-fluid" style="margin:0px;padding:30px ; background:rgb(2, 70, 148);">
			<form class="form-inline " style="padding: 20px" method="POST">
				<div class='form-row'>
										
					<label for="influxdb">
						<h5>InfluxDB地址：</h5>
					</label>
					<input type="text" name="influxdb" id="influxdb" class="form-control" placeholder=""
						aria-describedby="InfluxDB">

					<label for="token">
						<h5>Token：</h5>
					</label>
					<input type="password" name="token" id="token" class="form-control" placeholder=""
						aria-describedby="InfluxDB">

					<label for="measurement">
						<h5>Measurement：</h5>
					</label>
					<input type="text" name="measurement" id="measurement" class="form-control" placeholder="设备名称"
						aria-describedby="InfluxDB">
				</div>

				<div class='form-row' >
				<label for="cycle" >
					<h5>采集周期(秒)：</h5>
				</label>
				<input style="padding-block :30px; margin: 10px 0px; " type="text" name="cycle" id="cycle" class="form-control" placeholder="1">

				<button class="btn btn-primary form-control" href="#influxdbsetting"
					style="padding-block :30px; margin: 10px; " type="submit" name="Action" value="influxdb"
					id="startinfluxdb"> 开始写入 </button>
				<!-- 开始写入后应禁用写入按钮 在页面上方显示运行状态 根据表单字典长度区分表单提交按钮-->
				<a class="btn btn-danger form-control" style="padding-block: 30px; margin: 10px; " type="button"
					role="button"> 停止写入 </a>
				</div>
				{% with messages = get_flashed_messages(category_filter=["influx"]) %}
				{% if messages %}
				{% for message in messages %}
				{% if message%}
				<p><span class="badge badge-success">InfluxDB Running</span></p>
				{% endif %}
				{% endfor %}
				{% endif %}
				{% endwith %}

			</form>
		</div>

	</div>

	<div class="container-fluid" style="height:20px;padding-top: 30px;">
		<!--<h2>混合色彩进度条</h2>-->
		<!--<p>进度条可以设置多种颜色:</p> -->
		<div class="progress" style="height:10px; ">
			<div class="progress-bar" style="width:33.33%">
			</div>
			<div class="progress-bar bg-warning" style="width:33.33%">
			</div>
			<div class="progress-bar bg-danger" style="width:33.33%">
			</div>
		</div>
	</div>

	<div class="container-fluid" style="height:50px;">
		<footer style="text-align:center ">
			<p style="padding-top:25px">
				Copyright © 2020 Su600, Inc.
			</p>
		</footer>
	</div>
</body>

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/scripts.js"></script>

</html>